<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .msg {
            color: red;
        }
    </style>
    <script>
        
        window.onload = function () {
            //存储账号是否合法
            var accRe = false;
            //存储密码是否合法
            var pwdRe = false;
            //存储验证码是否正确
            var codeRe = false;
            //能够找到页面元素
            var realCode = createCode();
            //将真实验证码值填充到页面
            document.querySelector('#codeValue').innerText = realCode;
            //为验证码添加点击事件
            document.querySelector('#codeValue').onclick = function () {
                realCode = createCode();
                //将真实验证码值填充到页面
                document.querySelector('#codeValue').innerText = realCode;
            }

            //验证账号合法
            document.querySelector('#acc').onchange = function (event) {
                //手机号正则
                var telReg = /^1[3-9]\d{9}$/;
                //获取用户输入内容
                var acc = event.target.value;
                //验证是否符合正则
                accRe = telReg.test(acc);
                if (accRe) {
                    //合法
                    var msgSpan = event.target.nextElementSibling;
                    msgSpan.innerText = '';
                } else {
                    //不合法
                    var msgSpan = event.target.nextElementSibling;
                    msgSpan.innerText = '请输入11位手机号！';
                }
            }
            //密码验证合法
            document.querySelector('#pwd').onchange = function (event) {
                //密码正则
                var pwdReg = /^[0-9a-zA-Z]{6,20}$/;
                //获取用户输入内容
                var pwd = event.target.value;
                //验证是否符合正则
                pwdRe = pwdReg.test(pwd);
                if (pwdRe) {
                    //合法
                    var msgSpan = event.target.nextElementSibling;
                    msgSpan.innerText = '';
                } else {
                    //不合法
                    var msgSpan = event.target.nextElementSibling;
                    msgSpan.innerText = '请输入6~20位数字、字母！';
                }
            }
            //验证码合法
            document.querySelector('#code').onchange = function (event) {
                //获取用户输入内容
                var code = event.target.value;
                //存储验证码结果
                codeRe = realCode.toLowerCase() == code.toLowerCase();
                //判断用户输入的验证码值是否正确
                if (codeRe) {
                    //正确
                    var msgSpan = event.target.nextElementSibling.nextElementSibling;
                    msgSpan.innerText = '';
                } else {
                    //不正确
                    var msgSpan = event.target.nextElementSibling.nextElementSibling;
                    msgSpan.innerText = '请输入正确的验证码值！';
                }
            }

            //表单提交
            document.querySelector('form').onsubmit = function (event) {
                //判断是否都合法
                if (accRe && pwdRe && codeRe) {
                    //都合法
                    //获取用户输入的账号值
                    var acc = document.querySelector('#acc').value;
                    //获取用户输入的密码值
                    var pwd = document.querySelector('#pwd').value;
                    if (!(acc == '13566668888' && pwd == '123456')) {
                        //不跳转
                        event.preventDefault();
                        //提示
                        alert('账号或密码有误!');
                    }
                } else {
                    //不跳转
                    event.preventDefault();
                    //提示
                    alert('账号、密码和验证码有误!');
                }
            }
        }

        //生成随机验证码
        function createCode() {
            //定义验证码基值
            var str = 'abcdefghijklmiopqrstuvwxyzABCDFEGHIJKLMNOPQRSTUVWXYZ0123456789';
            //验证码结果
            var result = '';
            //生成4位验证码
            for (var count = 1; count < 5; count++) {
                //随机下标(索引) [0,len） Math.floor(Math.random()*(max-min))+min
                var index = Math.floor(Math.random() * str.length);
                //获取索引对应的字符
                var char = str.charAt(index);
                // console.log(char);
                result += char;
            }
            return result;

        }


    </script>
</head>

<body>
    <form action="./02-HomeWork.html">
        <label for="acc">账号:</label>
        <input type="text" name="acc" id="acc" placeholder="11位手机号">
        <span class="msg"></span>
        <br />
        <label for="pwd">密码:</label>
        <input type="password" name="pwd" id="pwd" placeholder="6~20位数字、字母组成">
        <span class="msg"></span>
        <br />
        <input type="text" name="code" id="code" placeholder="4位数字或字母">
        <span id="codeValue"></span>
        <span class="msg"></span>
        <br />
        <input type="submit">
    </form>
</body>

</html>